<template>
	<div class="order">
		<div class="dd">
			<div class="d1">
				<div class="d2">
					<p class="p1">书籍管理</p>
					—
					<p>订单详情</p>
				</div>
			</div>
			<div class="hr"></div>
			<div class="d3">
				<el-table ref='tableShip' :data="orders" border highlight-current-row>
					<el-table-column type="expand">
						<template slot-scope="props">
							<div class="d5">
								<table class="t1">
									<tr>
										<td>&nbsp;</td>
										<td><b>账号:&nbsp;</b>{{props.row.user.account}}</td>
										<td><b>电话:&nbsp;</b>{{props.row.user.phone}}</td>
										<td><b>下单:</b>{{props.row.user.nickname}}</td>
										<td>&nbsp;&nbsp;&nbsp;</td>
										<td>
											<span v-show="props.row.shipStatus>=1">
												<b>快递公司:{{props.row.shipper}}</b>
											</span>
										</td>
									</tr>
									<tr v-for="x in props.row.items">
										<td>
											<div class="d6" >
												<img :src="`http://127.0.0.1/api/public/showimg/${x.book.pic}`"
													style="display: block; width: 100%; height: 100%;" />
											</div>
										</td>
										<td><b>名称:&nbsp;</b>{{x.book.name}}</td>
										<td><b>数量:&nbsp;</b>{{x.num}}</td>
										<td><b>单价:&nbsp;</b>&yen;{{x.price}}</td>
										<td><b>库存:&nbsp;</b>{{x.book.stock}}</td>
									</tr>
								</table>
								<div class="ord">
									<ShipMents @click="doShip()" :ordid="props.row.ordid" @shipdone="doShipOne"
										v-show="props.row.shipStatus==0 && props.row.payStatus==1">
									</ShipMents>
								</div>
								
							</div>
						</template>
					</el-table-column>

					<el-table-column prop="ordid" label="订单号" min-width="60">
					</el-table-column>
					<el-table-column prop="ship2name" label="收货人" min-width="100">
					</el-table-column>
					<el-table-column prop="ship2addr" label="收货地址" min-width="200">
					</el-table-column>
					<el-table-column prop="ship2phone" label="电话" min-width="100">
					</el-table-column>
					<el-table-column prop="shipno" label="发货单号" min-width="120">
					</el-table-column>
					<el-table-column prop="tcreate" label="下单时间" min-width="80" :formatter="fmtDate">
					</el-table-column>
					<el-table-column prop="amount" label="总价" min-width="80">
					</el-table-column>
					<el-table-column label="付款">
						<template slot-scope="scope">
							<span v-show="scope.row.payStatus==1" style="font-weight: 600; color: gray;">
								已付
							</span>
							<span v-show="scope.row.payStatus==0" style="font-weight: 900; font-size: 1.1em;">
								未付
							</span>
						</template>
					</el-table-column>
					<el-table-column label="收货">
						<template slot-scope="scope">
							<span v-show="scope.row.shipStatus==0 && scope.row.payStatus==1">
								<el-link type="danger" @click="goShip(scope.row)"><b>待发货</b></el-link>
							</span>
							<span v-show="scope.row.shipStatus==0 && scope.row.payStatus==0"
								style="font-weight: 900; font-size: 1.1em;">
								待发
							</span>
							<span v-show="scope.row.shipStatus==1" style="font-weight: 800;">
								<el-link type="primary" @click="goShip(scope.row)"><b>已发</b></el-link>
							</span>
							<span v-show="scope.row.shipStatus==2" style="font-weight: 600;">
								已收
							</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script>
	import ShipMents from '@/components/pc/movie/ShipMents.vue'
	import {
		myDate
	} from "@/util"
	export default {
		components: {
			ShipMents
		},
		data() {
			return {
				orders: [],
				items: [],
				pagenum: 1,
				num: 50,
				total: 0
			}
		},
		methods: {
			fmtDate(row, column, cellValue, index) {
				let s = myDate.formatDay(cellValue)
				return s;
			},
			doShipOne(shipStatus, ordid, shipno, shipper) {
				console.log("this.$emit  去完成子组件向父组件传递消息")
				console.log("shipdone=" + shipStatus + "   ordid=" + ordid)
				let xShip = window.parseInt(shipStatus);
				let xid = window.parseInt(ordid)

				let y = -1;
				for (let n = 0; n < this.orders.length; n++) {
					if (this.orders[n].ordid == xid) {
						this.orders[n].shipStatus = xShip;
						this.orders[n].shipper = shipper;
						this.orders[n].shipno = shipno;
						y = n;
						break;
					}
				}
				if (y >= 0 && shipStatus == 1) {
					this.$alert("订单：[" + ordid + " ] 已经成功发货， 注意查看")
				}
				if (y >= 0 && shipStatus == 0) {
					this.$alert("订单：[" + ordid + " ] 发货失败！！！， 注意查看")
				}
			},
			goShip(ord) {
				let $table = this.$refs.tableShip;
				this.orders.map((item) => {
					if (ord.ordid != item.ordid) {
						$table.toggleRowExpansion(item, false)
					}
					if (ord.ordid == item.ordid) {
						$table.toggleRowExpansion(item, true)
					}
				})
			},
		},
		mounted() {
			this.$postKv("/api/adm/ord/findPageOrders2u/" + this.pagenum + "/" + this.num, this.find)
				.then(resp => {
					console.log(resp.data.data);
					this.orders = resp.data.data.orders;
					this.total = resp.data.data.total;
					console.log(this.orders)
				})
		}
	}
</script>

<style scoped>
	.order {
		width: 85%;
	}

	.order .hr {
		margin-top: 1%;
		border: 1px solid #f4f4f4;
	}

	.order .dd {
		width: 95%;
		margin-left: 5%;
	}

	.order .d1 {
		display: flex;
		justify-content: space-between;
		margin-top: 2%;
	}

	.order .d1 .p1 {
		color: #a7adb2;
	}


	.order .d2 {
		width: 17%;
		display: flex;
		justify-content: space-between;
	}

	.order .d4 {
		margin-top: 2%;

	}

	.order .d5 {
		width: 1000px;
		display: flex;
		justify-content: center;
	}

	.el-button span{
		width: 100%;
	}

	.order .t1 {
		margin-left: 10%;
		margin-right: 10%;
		width: 60%;
	}
	.order .d6{
		width: 3vw; height:3vw;
	}
</style>
